<template>
  <div class="app-container">
    <el-tabs :value="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('member-info')" name="detail-one">
        <span slot="label">会员信息</span>
        <user-info v-show="activeTab==='detail-one'" :member="member"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('trade-info')" label="交易信息" name="detail-two">
        <user-trade v-show="activeTab==='detail-two'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('login-log')" label="登录日志" name="detail-three">
        <user-login-logs v-show="activeTab==='detail-three'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('arbitrage-query')" label="套利查询" name="detail-four">
        <user-arbitrage v-show="activeTab==='detail-four'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('bank-info')" label="银行信息" name="detail-five">
        <user-bank-logs v-show="activeTab==='detail-five'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('operation-log')" label="操作记录" name="detail-six">
        <user-operate-logs v-show="activeTab==='detail-six'"/>
      </el-tab-pane>
      <!-- <el-tab-pane v-if="roleCheck('account-limit')" label="账户限制" name="detail-seven">
        <member-security v-show="activeTab==='detail-seven'"/>
      </el-tab-pane> -->
      <el-tab-pane v-if="roleCheck('address')" label="我的地址" name="my-address">
        <my-address v-show="activeTab==='my-address'"/>
      </el-tab-pane>
      <el-tab-pane  label="层级调整记录" name="7">
        <user-level-logs v-show="activeTab==='7'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import userInfo from './userInfo';
import userTrade from './userTrade';
import userLoginLogs from './userLoginLogs';
import UserArbitrage from '@/views/member/detail/userArbitrage';
import UserBankLogs from '@/views/member/detail/userBankLogs';
import UserOperateLogs from '@/views/member/detail/userOperateLogs';
import MemberSecurity from '@/views/member/detail/memberSecurity';
import MyAddress from '@/views/member/detail/myAddress';
import userLeveLogs from './userLeveLogs';

export default {
  name: 'member-detail',
  props: {
    member: {
      type: Object,
    },
  },
  components: {
    MemberSecurity,
    UserOperateLogs,
    UserBankLogs,
    UserArbitrage,
    userInfo,
    userTrade,
    userLoginLogs,
    MyAddress,
    'user-level-logs': userLeveLogs,
  },
  data() {
    return {
      activeTab: 'detail-one',
      agency: this.$store.state.member.agency,
    };
  },
  mounted() {
    // tab页记录访问日志
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '会员信息', true) });
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab.name;
      // tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, tab.label, true) });
    },
  },
  watch: {
    member(member) {
      // console.log(member);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
